<template>
	<div class='icons'>	
		<swiper :options="swipe_rOption">
		  <swiper-slide v-for="(item,key) in page" :key="key">
		  	<div class="icons-item" v-for="page in item" :key="page.id">
				<img :src="page.imgUrl">
				<p>{{page.title}}</p>
			</div> 
		  </swiper-slide>
	 	</swiper>
	</div>
</template>
<script>
export default {
    props:['iconsList'],
	data:function(){
		return {
			swipe_rOption:{
				pagination: {
		          el: '.swiper-pagination'
		        },
		        loop:true
			}
		}
	},
	computed:{
		page:function(){
			let pages =[];
			this.iconsList.forEach(function(item,index){
				var idex= Math.floor(index/8);
				if(!pages[idex])  pages[idex]=[];
				pages[idex].push(item)
			});
			return pages;
		}
	}
}
</script>
<style scoped>
.icons{
	width:100%;
	overflow:hidden;
	padding:0 0 0.3rem 0;
	background:#fff;
}
.icons-item{
	width:25%;
	float:left;
}
.icons-item >>> img{
   width:1.2rem;
   height:0.96rem;
   display:block;
   margin:0 auto;
   padding-top:.2rem;
}
.icons-item p{
	margin-top: .1rem;
	font-size:.28rem;
	text-align: center;
	color: #212121;
}
</style>